<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="__STATIC__/js/base.js"></script>
    <title>服务详情</title>
    <link rel="stylesheet" href="__STATIC__/css/base.css">
    <link rel="stylesheet" href="__STATIC__/css/userinfo.css">
    <link rel="stylesheet" href="__STATIC__/css/service.css">
    <script src="__STATIC__/js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="__STATIC__/css/index.css">
    <link rel="stylesheet" href="__STATIC__/js/layer_mobile/need/layer.css">
    <script src="__STATIC__/js/layer_mobile/layer.js"></script>
</head>
<body class="" style="overflow: scroll;background: #e5e5e5">
<section class="wrap " style="position: relative"       >
    <div id="area-info" style="display: none;position: absolute;width: 100%;">
        <ul class="tab bg-white" >
            <li  class="tab-item active " id="province">
                <span>选择省</span>
                <img src="__STATIC__/images/selected.png"/>
            </li>
            <li  class="tab-item" id="city">
                <span>选择市</span>
                <img src="__STATIC__/images/arrow_down.png"/>
            </li>
            <li  class="tab-item" id="area">
                <span>选择区</span>
                <img src="__STATIC__/images/arrow_down.png"/>
            </li>
        </ul>
        <div id="selected-list">
            <ul class="sel-province clearfix">
                {volist name="province" id="v"}
                <li class="pull-left {if $city.pId==$v.areaId}active{/if}" data-value="{$v.areaId}"><span>{$v.areaName}</span></li>
                {/volist}
            </ul>
            <ul  class="sel-city clearfix">
                {volist name="cit" id="v"}
                <li class="pull-left {if $city.dId==$v.areaId}active{/if}" data-value="{$v.areaId}"><span>{$v.areaName}</span></li>
                {/volist}
            </ul>
            <ul class="sel-area clearfix">
                {volist name="area" id="v"}
                <li class="pull-left {if $city.areaId==$v.areaId}active{/if}" data-value="{$v.areaId}"><span>{$v.areaName}</span></li>
                {/volist}
            </ul>
        </div>
    </div>
    <script>
        $(function(){
            //获取该服务商的地区
            $('#province span').html($(".sel-province").children('.active').text());
            $('#city span').html($(".sel-city").children('.active').text());
            $('#area span').html($(".sel-area").children('.active').text());
            $('#selectedArea').html( $('#province span').html()+'-'+ $('#city span').html()+'-'+$('#area span').html());
            //获取市
            $(".sel-province li").click(function () {
                var str=$(this).attr('data-value');
                $.post("{:\\think\\Url::build('index/Guquan/getCity')}",{province:str},function(msg){
                    var html="";
                    var htm="";
                    for(var j=0;j<msg.length;j++) {
                        html += '<li class="pull-left" data-value='+msg[j].areaId+'><span>'+msg[j].areaName+'</span></li>'
                        for(var i=0;i<msg[j].area.length;i++) {
                            htm += '<li class="pull-left" data-value='+msg[j].area[i].areaId+'><span >'+msg[j].area[i].areaName+'</span></li>'
                        }
                        $(".sel-area").html(htm);
                    }
                    $(".sel-city").html(html);
                })
            })
            $('.tab-item').on('click',function(){
                $('#selected-list ul').hide();
                $('.tab-item').removeClass('active');
                $('.tab-item').children('img').attr('src','__STATIC__/images/arrow_down.png');
                if($(this).hasClass('active')){
                }else {
                    $(this).addClass('active');
                    $(this).children('img').attr('src','__STATIC__/images/selected.png');
                    var selected = $(this).attr('id');
                    if(selected == 'province'){
                        $(' #selected-list .sel-province ').show();
                    }
                    if(selected == 'city'){
                        $(' #selected-list .sel-city ').show();
                    }
                    if(selected == 'area'){
                        $(' #selected-list .sel-area ').show();
                    }
                }
            });
            $('#selected-list  ul ').on('click','li',function(){
                $(this).parent().children('li').removeClass('active');;
                $(this).addClass('active');
                if($(this).parent().hasClass('sel-province')){
                    $('#province span').html($(this).children('span').text());
                }
                if($(this).parent().hasClass('sel-city')){
                    if( $('#province span').html()  == '选择省'){
                        layer.open({
                            content:'请先选择省'
                            ,skin: 'msg'
                            ,time:3 //2秒后自动关闭
                        });
                    }else {
                        $('#city span').html($(this).children('span').text());
                    }
                }
                if($(this).parent().hasClass('sel-area')){
                    if( $('#city span').html()  == '选择市'){
                        layer.open({
                            content:'请先选择省、市'
                            ,skin: 'msg'
                            ,time:3 //2秒后自动关闭
                        });
                    }else {
                        $('#area span').html($(this).children('span').text());
                        $('#area-info').hide();
                        $('#selectedArea').html( $('#province span').html()+'-'+ $('#city span').html()+'-'+$('#area span').html());
                        var serviceId=$("input[name='serviceId']").val();
                        var districts=$(".sel-area").children('.active').attr('data-value');
                        $.post("{:\\think\\Url::build('index/Goods/getPrice')}",{di:districts,serviceId:serviceId},function(msg){
                            if (msg.price=="面议"){
                                var p = "面议";
                                $("#price").removeAttr("style");
                                $("#price").css({'font-size':' 0.68266667rem','color':'#888'});
                                $("#submit").removeAttr("style");
                                $("#submit").css({'pointer-events':'none ','color':'#afafaf','cursor':'default' });
                            }else{
                                var p = '¥'+msg.price;
                                if(msg.isForSale==1){
                                    $("#submit").removeAttr("style");
                                    $("#submit").css({'border-top': '1px solid #049eff'});
                                    $("input[name='sprice']").attr('value',p);
                                    $("#price").removeAttr("style");
                                    $("#price").css({'font-size':' 0.68266667rem','color':'red'});
                                }else {
                                    $("#submit").removeAttr("style");
                                    $("#submit").css({'pointer-events':'none ','color':'#afafaf','cursor':'default' });
                                }

                            }

                            $("#price").text(p);

                            if(msg.type == '法律服务'){
                                var detailImgType = msg.detailImgType;
                                if(detailImgType =='律师'){
                                    var htmlstr ='<div class="fl" style="width: 10rem;"><img src="'+msg.ImgFile+'" alt="" style="width: 10rem;height: 6rem" id="detailImgFile"></div>\n' +
                                    '            <div class=" fl" style="width: 5rem;padding-top: 2rem;padding-left: 1rem">\n' +
                                    '                <p  style="color: #555;font-size: 0.512rem;">姓名：<span >'+msg.detailImgMember.realName+'</span></p>\n' +
                                    '                <p  style="color: #555;font-size: 0.512rem;">从业经验：<span >'+msg.detailImgMember.industryExperience+'年</span></p>\n' +
                                    '                <p><a href="lawyer.html?memberId='+msg.detailImgMember.memberId+'"  target="_blank"  class="fl" style="color: #22a0dc" >查看律师简介</a></p>\n' +
                                    '            </div>'
                                    $("#lowyer").html(htmlstr);
                                }
                                if(detailImgType =='产品'){
                                    var htmlstr= '  <img  id="goodsImg"  class=booknow_img src="'+msg.ImgFile+'" onerror="javascript:this.src='+'__STATIC__/images/booknow_img.png'+';" alt="" width="480" height="330">';
                                    $("#imgdetail").html(htmlstr);
                                }
                            }
                        })
                    }
                }

            });
        });
    </script>
    <input type="hidden" name="serviceId" value="{$service.serviceId}">
    <div class="service-detail">
        {if condition="$service.detailImgType eq '律师' " }
        <div class="lawyer-introduction clearfix"  id="lowyer">
            <div class="fl" style="width: 10rem;"><img src="{$service.detailImgFile}" alt="" style="width: 10rem;height: 6rem" id="detailImgFile"></div>
            <div class=" fl" style="width: 5rem;padding-top: 2rem;padding-left: 1rem">
                <p  style="color: #555;font-size: 0.512rem;">姓名：<span >{$service.detailImgMember.realName}</span></p>
                <p  style="color: #555;font-size: 0.512rem;">从业经验：<span >{$service.detailImgMember.industryExperience}年</span></p>
                <p><a href="lawyer.html?memberId={$service.detailImgMember.memberId}"  target="_blank"  class="fl" style="color: #22a0dc" >查看律师简介</a></p>
            </div>
        </div >
        {/if}
        {if condition="$service.detailImgType eq '产品' " }
        <div class="service-detail-img"><img src="{$service.thumbFile}"></div>
        {/if}
        <div class="service-detail-introduce ">
            <span class="service-name padding-left-12">{$service.serviceName}</span>
            <span class="service-price padding-left-12" id="price">¥{$price}</span>
        </div>
        <div class="service-select-area clearfix ">
            <span class="pull-left padding-left-12" id="selectedArea">选择地区</span>
            <span class="pull-right"><img src="__STATIC__/images/next.png"></span>
        </div>
        <script>
            $(function(){
                $('.service-select-area').on('click',function(){
                    $('#area-info').show();
                });
            })
        </script>
        <div class="service-detail-other">
            <ul class="clearfix padding-left-12">
                <li class="pull-left clearfix">
                    <div class="pull-left"><img src="__STATIC__/images/baozhang.png"></div>
                    <div class="pull-left">资质认证</div>
                </li>
                <li class="pull-left clearfix">
                    <div class="pull-left"><img src="__STATIC__/images/baozhang.png"></div>
                    <div class="pull-left">信息保密</div>
                </li>
                <li class="pull-left clearfix">
                    <div class="pull-left"><img src="__STATIC__/images/baozhang.png"></div>
                    <div class="pull-left">价格透明</div>
                </li>
                <li class="pull-left clearfix">
                    <div class="pull-left"><img src="__STATIC__/images/baozhang.png"></div>
                    <div class="pull-left">价格透明</div>
                </li>
            </ul>
        </div>
    </div>
    <div class="comment padding-left-12">
        <div class="comment-title "> 用户评价（{$reviewNum}）</div>
        <ul >
            {volist name="evaluate" id="v"}
            <li>
                <div class="comment-info1 clearfix">
                    <span style="display: block;width: 0.7253333rem"><img src="__STATIC__/images/comment.png"></span>
                    <span><?php echo substr_replace($v['mobile'],'**',3,6);?></span>
                    <span>
                        {for start="0" end="$v.starLevel"}
                        <label><img src="__STATIC__/images/ping.png"></label>
                        {/for}
                    </span>
                </div>
                <div class="comment-info2">
                    <span>{$v.addDateTime}</span>
                    <span>{$v.parea}-{$v.area}</span>
                </div>
                <div class="comment-info3">
                    {$v.detail}
                </div>
            </li>
            {/volist}
            <li>
                <a class="comment-other"  href="/comment?serviceId={$service.serviceId}">查看全部评论</a>
            </li>
        </ul>
    </div>
    <div class="service-detail-detail">
        <div class="bar_20"></div>
        <div  class="service-detail-title clearfix">
            <span class="service-detail-line pull-left"></span>
            <span class="pull-left">服务详情</span>
            <span  class="service-detail-line pull-left"></span>
        </div>
        <div class="service-detail-detail-img">{$service.describe}</div>
    </div>
    <div class="service-guarantee">
        <div class="bar_20"></div>
        <div  class="service-detail-title clearfix">
            <span class="service-detail-line pull-left"></span>
            <span class="pull-left">服务保障</span>
            <span  class="service-detail-line pull-left"></span>
        </div>
        <ul>
            <li class="clearfix">
                <div  class="pull-left">
                    <img src="__STATIC__/images/baozhang1.png">
                </div>
                <div  class="pull-left">
                    <span>我们的承诺</span>
                    <span >关于服务质量的反馈，我们会第一时间专人处理，包拯及时 解决您的问题</span>
                </div>
            </li>
            <li class="clearfix">
                <div  class="pull-left">
                    <img src="__STATIC__/images/baozhang2.png">
                </div>
                <div  class="pull-left">
                    <span>我们的承诺</span>
                    <span>关于服务质量的反馈，我们会第一时间专人处理，包拯及时 解决您的问题</span>
                </div>
            </li>
            <li class="clearfix">
                <div  class="pull-left">
                    <img src="__STATIC__/images/baozhang3.png">
                </div>
                <div class="pull-left">
                    <span>我们的承诺</span>
                    <span>关于服务质量的反馈，我们会第一时间专人处理，包拯及时 解决您的问题</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="content-phone">
        <a href="tel://<?php echo getServiceTel();?>">电话咨询</a>
        {if $price=="面议"}
        <a href="" style="pointer-events:none;color:#afafaf;cursor:default " id="submit">立即购买</a>
        {else}
        {if $service.isForSale==1}
        <a href="" style="border-top: 1px solid #049eff" id="submit">立即购买</a>
        {else}
        <a href="" style="pointer-events:none;color:#afafaf;cursor:default " id="submit">立即购买</a>
        {/if}
        {/if}
    </div>
    <script>

        $(function () {
            $("#submit").attr('href','/confirm?serviceId={$service.serviceId}&price={$price}&pName='+$('#province span').html()+'&cName='+$('#city span').html()+'&dName='+$('#area span').html())
        })

    </script>
</section>
</body>
</html>